<template>
	<div>
		<el-form inline>
			<el-form-item>
				<el-input placeholder="角色名称" v-model="searchObj.roleName" />
			</el-form-item>

			<el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
			<el-button @click="resRole">清空</el-button>
		</el-form>

		<div style="margin-bottom: 20px">
			<el-button type="primary" @click="dialogVisible = true">添加</el-button>
			<el-button type="danger" @click="deleteAllRole()">批量删除</el-button>
		</div>
		<el-dialog title="添加角色" :visible.sync="dialogVisible" width="30%">
			<span style="font-weight: bold;">请输入新名称</span>
			<el-input style="margin-top: 20px;" v-model="roleName"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addRole">确 定</el-button>
			</span>
		</el-dialog>

		<el-table border stripe style="width: 960px" :data="roleList.items" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />

			<el-table-column type="index" label="序号" width="80" align="center">
			</el-table-column>

			<el-table-column label="角色名称" prop="roleName">
				<template #default="{ row }">
					<template v-if="row.edit">
						<el-input class="edit-input" size="small" v-model="row.roleName" />
						<el-button class="cancel-btn" size="mini" icon="el-icon-refresh" type="warning"
							@click=cancelEdit(row)>
							取消
						</el-button>
					</template>
					<span v-else>{{ row.roleName }}</span>
				</template>
			</el-table-column>

			<el-table-column label="操作" width="250" align="center">
				<template #default="{ row }">
					<el-button size="mini" type="info" icon="el-icon-info" title="分配权限"
						@click="$router.push(`/aci/role/auth/${row.id}?roleName=${row.roleName}`)" />
					<el-button size="mini" type="primary" icon="el-icon-check" title="确定" @click="upDataEdit(row)" />
					<el-button size="mini" type="primary" icon="el-icon-edit" title="修改角色" @click="rowEdit(row)" />
					<el-button size="mini" type="danger" icon="el-icon-delete" title="删除角色" @click="deleteRole(row)" />
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :current-page="page" :page-size="limit" :total="totalCount" :page-sizes="[5, 10, 20]"
			style="padding: 20px 0" layout="prev, pager, next, jumper, ->, sizes, total" @current-change="getRoles"
			@size-change="handleSizeChange" />
	</div>
</template>

<script>

import roleApi from '@/api/acl/role'
export default {
	data() {
		return {
			page: 1,
			limit: 3,
			totalCount: 0,
			searchObj: {
				username: "",
			},
			roleList: {},
			dialogVisible: false,
			roleName: '',
			selectedIds: [], // 所有选择的user的id的数组
		}
	},

	methods: {
		// 获取角色信息
		async getRoleList() {
			const { page, limit, searchObj } = this
			try {
				let result = await roleApi.getPageList(page, limit, searchObj)
				// console.log(result);
				if (result && result.code === 20000) {
					this.roleList = result.data
					this.totalCount = result.data.total
				}
			} catch (error) {
				alert('获取角色信息失败')
			}
		},
		// 搜索回调
		search() {
			this.getRoleList()
		},
		// 清空搜索数据
		resRole() {
			this.searchObj.roleName = '',
				this.getRoleList()
		},
		// 添加新的角色
		addRole() {
			try {
				roleApi.save({ roleName: this.roleName })
				// roleApi.save(this.roleName)
				this.$message.success('添加角色成功')
				this.dialogVisible = false,
					// this.roleName = ''
					this.getRoleList()
			} catch (error) {
				this.$message.error('添加失败')
			}
		},
		// 编辑更新按钮
		upDataEdit(row) {
			try {
				roleApi.updateById({ id: row.id, roleName: row.roleName })
				row.edit = false;
				this.$message.success('修改角色成功')
			} catch (error) {
				console.log(error);
			}
		},
		// 翻页信息的回调
		getRoles(val) {
			this.page = val
			this.getRoleList()
		},
		// 获取总页数的回调
		handleSizeChange(val) {
			this.page = 1
			this.limit = val
			this.getRoleList()
		},
		// 点击编辑角色
		rowEdit(row) {
			this.$set(row, 'edit', true)
		},
		// 点击取消编辑角色
		cancelEdit(row) {
			// console.log(row);
			row.roleName = row.originRoleName;
			row.edit = false;
			this.$message.success('取消修改')
			this.getRoleList()
		},
		// 点击删除角色
		deleteRole(row) {
			roleApi.removeById(row.id)
				this.$confirm(`确认删除${row.roleName}嘛`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.getRoleList()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			
		},
		// 列表选中状态发生改变的监听回调
		handleSelectionChange(selection) {
			this.selectedIds =  selection.map((item)=>item.id)
		},
		// 点击选中 批量删除
		deleteAllRole() {
			roleApi.removeRoles(this.selectedIds)
			this.$confirm(`确认删除嘛`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.getRoleList()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
		}
	},


	mounted() {
		this.getRoleList()
	}
}

</script>

<style lang="scss" scoped></style>